<template>
    <div class="resetPassword">
        <div class="moduleHead">
            <router-link :to="{ name: 'login' }">
                <span class="back"></span>
            </router-link>
            <span> {{language.resetPassword_title}} </span>
        </div>
        <div class="promptTip"></div>
        <div class="body">
            <template v-if="!sendSuccess">
                <div class="desc">
                    {{language.resetPassword_desc}}
                </div>
                <div v-bind:class="username.length > 0 ? 'formrow hasValue' : 'formrow'">
                    <input v-model="username" @input="updateSubmitState" maxlength=20 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" name="userName" id="userName" type="text" v-validate="'required|usernameORemail'" class="username" />
                    <label :class="{'validate-error-color': hasValidateError('userName')}" for="userName">{{userNameLabel}}</label>
                </div>
                <router-link :to="{name:'login'}" class="a_forgotLogin">
                    {{language.resetPassword_forgotLogin}}
                </router-link>
                <button @click="submitData" :class="{disabled:submitDisabled}" class="btn">
                    <loading :props="{show:loadingAjax,type:'btn'}"></loading>
                    {{language.unify_send}}
                </button>
            </template>
            <div v-else class="send_success_note">
                <h3>{{language.resetPassword_sendSuccessTitle}}</h3>
                <p v-html="language.resetPassword_sendSuccessTips"></p>
            </div>
        </div>
    </div>
</template>
<script>
import validationMixin from '../plugins/my-validate'
import * as API from '../api'
import loading from './Loading'

export default {

    name: 'resetPassword',

    components: {
        loading,
    },

    mixins: [validationMixin],

    data: function() {
        return {
            username: '',
            sendSuccess: false,
            loadingAjax: false,
            submitDisabled: true,
            userNameLabel: '',
        }
    },

    created() {
        this.userNameLabel = this.language.login_userNameLabel;
    },

    methods: {

        updateSubmitState(e) {
            this.changeField('userName', 'showError', false);
            this.submitDisabled = this.checkAll() ? false : true;
            this.userNameLabel = this.hasValidateError('userName') ? this.getValidateError('userName') : this.language.login_userNameLabel;
        },

        submitData() {
            this.changeField('userName', 'showError', true);
            var tthis = this;
            if (!tthis.submitDisabled && !tthis.loadingAjax) {
                tthis.loadingAjax = true;
                API.forget_password({
                    data: {
                        email: tthis.username
                    },
                    success: function(data) {
                        if (data) {
                            tthis.sendSuccess = true;
                            tthis.username = '';
                        }
                    },
                    complete: function() {
                        tthis.loadingAjax = false;
                    }
                })
            }
        }
    }
}

</script>
<style scoped>
.resetPassword {
    padding-top: 44px;
}

.resetPassword .formrow {
    margin-top: 20px;
    position: relative;
    min-height: 46px;
    margin-bottom: 10px;
}

.resetPassword .formrow label {
    position: absolute;
    left: 0;
    top: 10px;
    min-height: 16px;
    width: 100%;
    line-height: 16px;
    z-index: 1;
    color: #757575;
    font-size: 14px;
    -webkit-transition: all .2s;
    transition: all .2s;
    padding: 5px 0;
}

.resetPassword .formrow input {
    border: 0;
    border-bottom: 1px solid #ccc;
    width: 100%;
    color: #333;
    height: 46px;
    line-height: 20px;
    padding: 15px 0 0 0;
    box-sizing: border-box;
    font-size: 14px;
    font-family: Helvetica, Tahoma, Arial, 华文细黑, 微软雅黑, sans-serif;
    position: relative;
    border-radius: 0;
}

.resetPassword .hasValue label,
.resetPassword .hasValue input:focus~label,
.resetPassword .formrow input:focus~label {
    transform: scale(.8, .8) translate(-12.5%, -15px);
    -moz-transform: scale(.8, .8) translate(-12.5%, -15px);
    -webkit-transform: scale(.8, .8) translate(-12.5%, -15px);
    color: #222;
    top: inherit;
    bottom: 10px;
}

.resetPassword .formrow input.validate-error-border~label {
    color: #f00;
}

.resetPassword .body {
    padding: 20px 20px 0;
    color: #999;
    font-size: 15px;
}


.resetPassword .body .desc {
    padding-bottom: 10px;
}

.resetPassword .body button {
    margin: 24px 0;
}

.resetPassword .send_success_note {
    padding: 80px 0;
    font-size: 13px;
    max-width: 320px;
    margin: auto;
}

.resetPassword .send_success_note h3 {
    font-size: 15px;
    text-align: center;
    padding-bottom: 20px;
    color: #333;
    font-weight: 500;
}

</style>
